<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li, input{
            width: 600px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #999;
            line-height: 10px;
        }
        #x1{
            width: 600px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #999;
            line-height: 10px;
        }

    </style>


    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            // 基本选择器
            // $('#list').css('border', '5px solid #f00'); // ID选择器 被选中的id改变样式
            // $('#list').css('background-color', '#abcdef');
            // $('.moba').css('border', '5px solid #f00'); // class选择器
            // $('*').css('border', '5px solid blue');  // 每一个标签都改变样式
            // $('li').css('border', '5px solid #f00'); // 被选中标签 所有标签改变样式
            // 层级选择器
            // $('#list li').css('border', '5px solid #f00'); // 选中后代元素
            // $('#list>li').css('border', '5px solid #f00'); // 选中list 所有子元素
            // $('.moba+li').css('border', '5px solid #f00'); // 选中下一个同辈元素
            // $('.moba~li').css('border', '5px solid #f00'); 选中所有同辈元素
            
            // $('#list li:first').css('border', '5px solid #f00'); // 首个标签
            // $('#list li:last').css('border', '5px solid #f00'); // 最后一个标签
            // $('#list li:eq(2)').css('border', '5px solid #f00'); // 选择第几个标签
            // $('#list li:lt(3)').css('border', '5px solid #f00');// 索引小于
            // $('#list li:gt(2)').css('border', '5px solid #f00'); // 索引大于
            // $('#list li:even').css('border', '5px solid #f00'); // 索引为偶数
            // $('#list li:odd').css('border', '5px solid #f00'); // 索引为奇数
            // $('#list li:header').css('border', '5px solid #f00'); // 所有h标签
            // $('#list li:not(last)').css('border', '5px solid #f00');// 排除制定选择器选的元素
            // 表单选择器
            // $(':input') // 选择所有的input表单
            // $('form input:text').css('border', '5px solid red'); // 选中text表单
            // $('form input:button').css('border', '5px solid red'); // 选中button表单
            // $('form input:checkbox').css('border', '5px solid red'); // 选中checkbox表单
            // $('form input:image').css('border', '5px solid red'); // 选中image表单
            // $('form input:password').css('border', '5px solid red'); // 选中password表单
            // $('form input:radio').css('border', '5px solid red'); // 选中radio表单
            // $('form input:reset').css('border', '5px solid red'); // 选中reset表单
            // $('form input:submit').css('border', '5px solid red'); // 选中submit表单
            // $('form input:file').css('border', '5px solid red'); // 选中file表单
            // 
            // 
            // $("li:contains('王')").css('border', '5px solid #f00'); // 选中指定文本
            // $("li:has('moba')").css('border', '5px solid #f00'); //  匹配含有选择器 所匹配的元素 的元素
            // $("li:parent").css('border', '5px solid #f00'); // 能作为父级节点的元素
            // $("li:empty").css('border', '5px solid #f00');//  不含有子元素 和文本的空元素
            // $("li:hidden").css('border', '5px solid #f00'); // 所有不可见元素
            // $("li:visible").css('border', '5px solid #f00'); // 所有可见元素
            // $("imglist img[width]").css('border', '5px solid #f00'); // 选择指定属性的元素
            // $("imglist img[width='200']").css('border', '5px solid #f00'); // 指定值 等于value的元素
            // $("imglist img[width!=201]").css('border', '5px solid #f00'); // 指定值 不等于value的元素
            // $("imglist img[alt^='m']").css('border', '5px solid #f00');  // 指定值 以value开头的元素
            // $("imglist img[title$='1']").css('border', '5px solid #f00'); // 指定值 以value结尾的元素
            // $("imglist img[title*='g']").css('border', '5px solid #f00'); // 包含有value值的元素
            // $("img[width][width="200"][alt='m']").css('border', '5px solid #f00'); // 多个属性选择器
            // $("imglist img:first-child").css('border', '5px solid #f00'); // 首个子元素
             // $("imglist img:last-child").css('border', '5px solid #f00'); // 最后一个元素
            // $("imglist img:nth-child(2)").css('border', '5px solid #f00'); // 第2个子元素
            // ("imglist img:only-child").css('border', '5px solid #f00'); // 元素中唯一一个子元素
            // $("input:enabled").css('border', '5px solid #f00'); // 匹配所有可用的表单元素
            // $("input:disabled").css('border', '5px solid #f00'); // 匹配所有不可用元素
            // $("input:check").css('border', '5px solid #f00'); // 匹配所用选中的表单元素
            // $("input:select").css('border', '5px solid #f00'); // 匹配所有选中的option元素
        });
    </script>
</head>
<body>

    <h1>JQ</h1>
    <form>
    <input type="button" value="Input Button"/>,
    <input type="checkbox">,
 
    <input type="file">,
    <input type="hidden">,
    <input type="image">,.
    <input type="password">,
    <input type="radio">,
    <input type="reset">,

    <input type="submit">,
    <input type="text">,
    </form>


    <div id="imglist">
        <img src="../../../img/1.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/2.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/3.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/4.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/5.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/6.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/7.jpg" alt="m1" width="200" title="i1">
    </div>

    <span>选择器</span>
    <input type="text" class="text" name="select">
    <ul id="list">
        <li>
            游戏
            <ul class="moba">
                <li>英雄联盟</li>
                <li>DOTA</li>
                <li>梦三国</li>
                <li>风暴英雄</li>
                <li>
                    魔兽争霸
                    <ul id="mmorpg">
                        <li>命运2</li>
                        <li>天涯明月刀</li>
                        <li>剑灵</li>
                        <li>
                            古剑奇谭ol
                            <ul id="single">
                                <li>只狼</li>
                                <li>黑暗之魂</li>
                                <li>仁王</li>
                                <li>gta5</li>
                                <li>古墓丽影</li>
                                <li>
                                    刺客信条
                                    <ul id="2D">
                                        <li>地下城与勇士</li>
                                        <li>死亡细胞</li>
                                        <li>空洞骑士</li>
                                    </ul>
                                </li>
                                <li>far cry</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <ul id="x1">选择器</ul>
</body>
</html>